<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Cloud Portal</title>
	
	<!-- css -->
	<style type="text/css">
   		@import "${pageContext.request.contextPath}/resources/css/screen.css";
   		@import "${pageContext.request.contextPath}/resources/css/datePicker.css";
	</style>

	
	<!--  jquery core -->
	<script type="text/javascript">
		<%@ include file="/resources/js/jquery/jquery-1.4.1.min.js" %>
	</script>
	
	<!--  checkbox styling script -->
	<script type="text/javascript">
		<%@ include file="/resources/js/jquery/ui.core.js" %>
		<%@ include file="/resources/js/jquery/ui.checkbox.js" %>
		<%@ include file="/resources/js/jquery/jquery.bind.js" %>
	</script>
	<script type="text/javascript">
		$(function() {
			$('input').checkBox();
			$('#toggle-all').click(function() {
				$('#toggle-all').toggleClass('toggle-checked');
				$('#mainform input[type=checkbox]').checkBox('toggle');
				return false;
			});
		});
	</script>
	
	<![if !IE 7]>
	
	<!--  styled select box script version 1 -->
	<script type="text/javascript">
		<%@ include file="/resources/js/jquery/jquery.selectbox-0.5.js" %>
	</script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('.styledselect').selectbox({
				inputClass : "selectbox_styled"
			});
		});
	</script>
	
	
	<![endif]>
	
	<!--  styled select box script version 2 -->
	<script	type="text/javascript">
		<%@ include file="/resources/js/jquery/jquery.selectbox-0.5_style_2.js" %>
	</script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('.styledselect_form_1').selectbox({
				inputClass : "styledselect_form_1"
			});
			$('.styledselect_form_2').selectbox({
				inputClass : "styledselect_form_2"
			});
		});
	</script>
	
	<!--  styled select box script version 3 -->
	<script	type="text/javascript">
		<%@ include file="/resources/js/jquery/jquery.selectbox-0.5_style_2.js" %>
	</script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('.styledselect_pages').selectbox({
				inputClass : "styledselect_pages"
			});
		});
	</script>
	
	<!--  styled file upload script -->
	<script type="text/javascript">
		<%@ include file="/resources/js/jquery/jquery.filestyle.js" %>
	</script>
	<script type="text/javascript" charset="utf-8">
		$(function() {
			$("input.file_1").filestyle({
				image : "/resources/images/forms/choose-file.gif",
				imageheight : 21,
				imagewidth : 78,
				width : 310
			});
		});
	</script>
	
	<!-- Custom jquery scripts -->
	<script type="text/javascript">
		<%@ include file="/resources/js/jquery/custom_jquery.js" %>
	</script>
	
	<!-- Tooltips -->
	<script type="text/javascript">
		<%@ include file="/resources/js/jquery/jquery.tooltip.js" %>
		<%@ include file="/resources/js/jquery/jquery.dimensions.js" %>
	</script>
	<script type="text/javascript">
		$(function() {
			$('a.info-tooltip ').tooltip({
				track : true,
				delay : 0,
				fixPNG : true,
				showURL : false,
				showBody : " - ",
				top : -35,
				left : 5
			});
		});
	</script>
	
	
	<!--  date picker script -->
	<script type="text/javascript">
		<%@ include file="/resources/js/jquery/date.js" %>
		<%@ include file="/resources/js/jquery/jquery.datePicker.js" %>
	</script>
	<script type="text/javascript" charset="utf-8">
		$(function() {
	
			// initialise the "Select date" link
			$('#date-pick').datePicker(
			// associate the link with a date picker
			{
				createButton : false,
				startDate : '01/01/2005',
				endDate : '31/12/2020'
			}).bind(
			// when the link is clicked display the date picker
			'click', function() {
				updateSelects($(this).dpGetSelected()[0]);
				$(this).dpDisplay();
				return false;
			}).bind(
			// when a date is selected update the SELECTs
			'dateSelected', function(e, selectedDate, $td, state) {
				updateSelects(selectedDate);
			}).bind('dpClosed', function(e, selected) {
				updateSelects(selected[0]);
			});
	
			var updateSelects = function(selectedDate) {
				var selectedDate = new Date(selectedDate);
				$('#d option[value=' + selectedDate.getDate() + ']').attr(
						'selected', 'selected');
				$('#m option[value=' + (selectedDate.getMonth() + 1) + ']').attr(
						'selected', 'selected');
				$('#y option[value=' + (selectedDate.getFullYear()) + ']').attr(
						'selected', 'selected');
			}
			// listen for when the selects are changed and update the picker
			$('#d, #m, #y').bind('change', function() {
				var d = new Date($('#y').val(), $('#m').val() - 1, $('#d').val());
				$('#date-pick').dpSetSelected(d.asString());
			});
	
			// default the position of the selects to today
			var today = new Date();
			updateSelects(today.getTime());
	
			// and update the datePicker to reflect it...
			$('#d').trigger('change');
		});
	</script>
	
	<!-- MUST BE THE LAST SCRIPT IN <HEAD></HEAD></HEAD> png fix -->
	<script type="text/javascript">
		<%@ include file="/resources/js/jquery/jquery.pngFix.pack.js" %>
	</script>
	<script type="text/javascript">
		$(document).ready(function() {
			$(document).pngFix();
		});
	</script>
	
</head>




<body>

	<!-- Start: page-top-outer -->
	<tiles:insertAttribute name="header" />
	<!-- End: page-top-outer -->

	<div class="clear">&nbsp;</div>

	<!--  start nav-outer-repeat................................................................................................. START -->
	<tiles:insertAttribute name="navigation" />
	<!--  start nav-outer-repeat................................................... END -->

	<div class="clear"></div>

	<!-- start content-outer ........................................................................................................................START -->
	<tiles:insertAttribute name="content-outer" />
	<!--  end content-outer........................................................END -->

	<div class="clear">&nbsp;</div>

	<!-- start footer -->
	<tiles:insertAttribute name="footer" />
	<!-- end footer -->

</body>